/*
参考文档：
https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-vue （初步构建 vue 组件）
https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins （插件的使用）
https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins-list （插件列表）
https://lbs.amap.com/api/javascript-api-v2/guide/services/autocomplete （搜索地址插件文档）
*/

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
let map = null;
let placeSearch = null;
let autocomplete = null;

// 控制弹窗显示
const dialogVisible = ref(false);

// 确认选中的地址信息
const selectedData = ref({
  name: '',
  address: '',
  location: null
});

// 打开弹窗
const openDialog = () => {
  dialogVisible.value = true;
};

// 向父组件抛出选择事件
const emit = defineEmits(["selected"]);

// 弹窗打开事件处理
const handleDialogOpen = () => {
  initMap();
};

// 弹窗关闭事件处理
const handleDialogClose = () => {
  destroyMap();
  // 清空搜索框和选中数据
  data.value = '';
};

// 确认选择地址
const confirmSelection = () => {
  selectedData.value = data.value;
  emit("selected", selectedData.value || {});
  dialogVisible.value = false;
};

// // 监听弹窗状态变化
// watch(dialogVisible, (newVal) => {
//   if (newVal) {
//     inputContent.value = '';
//     // 弹窗打开时初始化地图
//     initMap();
//   } else {
//     // 弹窗关闭时销毁地图
//     destroyMap();
//   }
// });

// 初始化地图
const initMap = () => {
  window._AMapSecurityConfig = {
    // 密钥
    // securityJsCode: "59093b4861073d9d7162fc2ae19322a1",
    securityJsCode: "7063625df206f0822c0aeb79afc84e04",
  };
  AMapLoader.load({
    // key: "c256d06991cc57fb04d0b5174ffd206c", // 申请好的Web端开发者Key，首次调用 load 时必填
    key: "bb747bef7316b7ea1f3439da504ccaef", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.PlaceSearch', 'AMap.Geolocation'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "2D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.012034, 29.679447], // 初始化地图中心点位置
      });
      // 添加定位控件
      map.addControl(new AMap.Geolocation());

      // 加载插件
      AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function () {
        var autoOptions = {
          //城市，默认全国
          city: "九江",
          //使用联想输入的 input 的 id
          input: "input",
          output: "output" // 显示结果列表的容器id
        };
        autocomplete = new AMap.AutoComplete(autoOptions);
        placeSearch = new AMap.PlaceSearch({
          city: "九江",
          map: map,
          panel: "my-panel", // 结果显示的容器id
          pageSize: 4, //单页显示结果条数
          pageIndex: 1, //页码
        });
        autocomplete.on("select", function (e) {
          //针对选中的poi实现自己的功能
          placeSearch.search(e.poi.name);
          console.log("选中的地点", e.poi);
        });

        placeSearch.on("selectChanged", function (e) {
          console.log("当前选中的位置：", e);
          data.value = e.selected.data
        });
      });
    })
    .catch((e) => {
      console.log(e);
    });
};

// 销毁地图
const destroyMap = () => {
  if (map) {
    console.log("销毁地图");
    map.destroy();
    map = null;
  }
  const panelEl = document.getElementById('my-panel');
  if (panelEl) panelEl.innerHTML = '';
  inputContent.value = '';
};

onUnmounted(() => {
  destroyMap();
});

const data = ref("");
const inputContent = ref("");

// 暴露方法给父组件
defineExpose({ openDialog });
</script>

<template>
    <!-- 地址选择弹窗 -->
      <el-dialog
      v-model="dialogVisible"
      title="选择地址"
      width="60%"
      height="60%"
      @opened="handleDialogOpen"
      @closed="handleDialogClose"
      append-to-body
    >
      <div id="container"></div>
      <div id="my-panel"></div>
      <el-input id="input" v-model="inputContent" placeholder="请输入关键字"  style="    position: absolute;
          width: 200px;
          margin: 10px 0px;
          top: 0;
          left: calc(50% - 100px);">
        <template #prepend>🔍</template>
      </el-input>
      <div id="output" style="  position: absolute;  width: 200px;
    left: calc(50% - 100px);
    top: 41px;
    background-color: white;"></div>

      <el-card class="location-card" style="margin-top: 20px;">
        <template #header>
          <div class="card-header">
            <span>📍 当前选中位置</span>
          </div>
        </template>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="地点名称">{{ data.name || '未选择地点' }}</el-descriptions-item>
          <el-descriptions-item label="详细地址">{{ data.address || '无' }}</el-descriptions-item>
          <el-descriptions-item label="经度">{{ data.location?.lng || '无' }}</el-descriptions-item>
          <el-descriptions-item label="纬度">{{ data.location?.lat || '无' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSelection" :disabled="!data.name">
            确认选择
          </el-button>
        </span>
      </template>
    </el-dialog>
</template>

<style scoped>
#my-panel {
  position: absolute;
  right: 0;
  top: 0;
}

#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 400px;
}

.location-card {
  margin-top: 20px;
}

.card-header {
  font-weight: 600;
  color: #409eff;
}
</style>
